<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8 />
	<title>Test HTML5</title>

	<script type="text/javascript" src="Ref.js"></script>
	<script type="text/javascript">

	document.ready = function()
	{
		// global managers
		currentSelected = null;
		counterManager = {};
		controlManager = [];
		toolbox = document.getElementById("toolbox");
		workspace = document.getElementById("workspace");

		// allow drop on workpace
		var dropHandler = new IDropable();
		workspace.addEventListener("dragenter", dropHandler.dragEnter, false);
		workspace.addEventListener("dragover", dropHandler.dragOver, false);
		workspace.addEventListener("dragleave", dropHandler.dragLeave, false);
		workspace.addEventListener("drop", dropHandler.drop, false);

		// load controls
		loadControls("controls.xml", toolbox, workspace, controlManager, counterManager);
	}

	</script>

	<style type="text/css">
	#toolbox div
	{
		font-family: Arial;
		margin: 10px 10px 0px 10px;
		width: 140px;
		height: 30px;
		text-align: center;
	}

	#toolbox div button
	{
		margin: 0;
		height: 30px;
		width: 110px;
	}

	#toolbox div img
	{
		margin-top: 1px;
		margin-left: 1px;
		float:left;
		height: 29px;
		width: 29px;
	}

	#toolbox
	{
		float: left;
		width: 160px;
		height: 600px;
		border: solid 1px black;
		background-color: rgba(230, 230, 230, 255);
	}

	#workspace
	{
		float: left;
		width: 1000px;
		height: 600px;
		margin-left: 10px;
		border: solid 1px black;
		background-color: rgba(230, 230, 230, 255);
		overflow: auto;
	}
	</style>

</head>
<body>
	<div id="toolbox"></div>
	<div id="workspace"></div>
</body>
</html>
